<template>
  <div>
    <div class="input-group input-group-sm mb-3" id="toinpt">
        <div class="input-group-prepend">
         <span class="input-group-text" id="inputGroup-sizing-sm">任务</span>
        </div>
        <input type="text" v-model.trim="taskname"   class="form-control" id="inputTo" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" placeholder="请填写任务信息">
         <button type="button" class="btn btn-primary btnD" @click="Add">添加新任务</button>
    </div>
  </div>
</template>

<script>
export default {
    name:'TodoInput',
    emits:['add'],
    data(){
      return{
        taskname:''
      }
    },
    methods:{
      Add(){
        if(!this.taskname)return alert('输入数据不能为空')
        this.$emit('add',this.taskname)
        this.taskname=''
      }
    }

}
</script>

<style lang="less">
#toinpt{
  width: 392px;
  border-radius: 3px;
  #inputTo{
    width: 260px;
    height: 35px;
    margin-right: 10px;
    border-radius: 3px;
  }
}
</style>